<template lang="pug">
  .room
    .header
      img.exit(src="../assets/exit.png")
      img.audience(src="../assets/audience.png")
    .container
      .sixPerson(v-if=" type === 'six'")
        .parters
          .perter
            .sayMsg(v-show="parters[0].sayMsg") {{parters[0].sayMsg}}
            .parterIcon
              img(:src="parters[0].userIcon")
            img.parterbrand(src="../assets/brandback.png")
        .parters
          .perter
            .sayMsg(v-show="parters[1].sayMsg") {{parters[1].sayMsg}}
            .parterIcon
              img(:src="parters[1].userIcon")
            img.parterbrand(src="../assets/brandback.png")
          .perter
            .sayMsg(v-show="parters[2].sayMsg") {{parters[2].sayMsg}}
            img.parterbrand(src="../assets/brandback.png")
            .parterIcon
              img(:src="parters[2].userIcon")
            
        .parters
          .perter
            .sayMsg(v-show="parters[3].sayMsg") {{parters[3].sayMsg}}
            .parterIcon
              img(:src="parters[3].userIcon")
            img.parterbrand(src="../assets/brandback.png")
          .perter
            .sayMsg(v-show="parters[4].sayMsg") {{parters[4].sayMsg}}
            img.parterbrand(src="../assets/brandback.png")
            .parterIcon
              img(:src="parters[4].userIcon")
            
        .parterSelf         
      .ninePerson(v-if=" type === 'nine'")
    tabbar.footer
      .userInfo
        .userIcon
          img(:src="user.userIcon")
        .user
          .nickname {{user.nickname}}
          .fate 50分/豆
      .actions
        img.voice(src="../assets/voice.png")
        img.order(src="../assets/order.png")
        img.notice(src="../assets/notice.png")
        img.chat(src="../assets/chat.png")
</template>

<script>
export default {
  name: 'Room',
  data () {
    return {
      msg: 'Welcome to Your room',
      user:{
        nickname: '上山打老虎',
        userIcon:'/static/logo.png'
      },
      type:'six',
      parters:[
        {
          userIcon:'/static/logo.png',
          sayMsg: '我等的花都谢啦'
        },
        {
          userIcon:'/static/logo.png',
          sayMsg: '我等的花都谢啦'
        },
        {
          userIcon:'/static/logo.png',
          sayMsg: '我等的花都谢啦'
        },
        {
          userIcon:'/static/logo.png',
          sayMsg: '我等的花都谢啦'
        },
        {
          userIcon:'/static/logo.png',
          sayMsg: '我等的花都谢啦'
        },
        {
          userIcon:'/static/logo.png',
          sayMsg: '我等的花都谢啦'
        },
      ]
    }
  },
  created(){
    document.title = '游戏大厅'
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  .room{
    width: 100%;
    height: 100%;
    background-image: url('../assets/table.png');
    background-size:100% 100%; 
    .header{
      position: relative;
      >img{
        position: absolute;
        height: 50px;
        widows: 50px;
        border-radius: 30px;
        overflow: hidden;
        top:10px;
      }
      .exit{
        left: 15px;
      }
      .audience{
        right: 15px;
      }
    }
    .container{
      .sixPerson{
        .parters{
          display: flex;
          justify-content: space-between;
          .perter{
            // display: flex;
            width: 120px;
            .sayMsg{
              width: 100%;
              font-size: 12px;
            }
            .parterIcon{
              width:50px;
              height: 50px;
              border-radius:25px;
              overflow: hidden;
              border: 2px solid #fff;
              display: inline-block;
              img{
                height: 100%;
                width: 100%;
              } 
            }
            .parterbrand{
              width: 50px;
              display: inline-block;
            }
          }
        }
      }
    }
    .footer{
      background-color: transparent;
      background-image:url('../assets/room-footer.png');
      background-size: 100% 100%;
      height:62px;
      border-top:0 solid transparent;
      &:before{
        border-top:0 solid transparent
      }
      .userInfo{
        height:100%;
        width: 40%;
        // background-color: #fff;
        position: relative;
        font-size: 12px;
        .userIcon{
          width: 54px;
          height: 54px;
          border-radius: 27px;
          border: 2px solid #fff;
          overflow: hidden;
          position: absolute;
          top:4px;
          left: 10px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .user{
          position: absolute;
          top: 6px;
          left: 40px;
          background-color: #fff;
          border-radius: 4px;
          height: 50px;
          z-index: -1;
          padding-left: 24px;
          padding-right: 10px;
          .nickname{
            width: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      .actions{
        display: flex;
        height: 100%;
        width: 58%;
        justify-content:space-between;
        align-items:center;
        >img{
          width: 18%;
          height: 45px;
        }
      }
    }
  }

</style>
